<template>
	<div class="home">
		<el-header>
			<el-row justify="space-between">
				<el-col :span="5">XX黑心书店</el-col>
				<el-col :span="11">
					<el-menu mode="horizontal" :ellipsis="false"
					background-color="#3575ff"
					text-color="#ffffff"
					active-text-color="#ffd04b"
					:router="true"
					>
						<el-menu-item index="main">主页</el-menu-item>
						<el-menu-item index="detaList">商品详情</el-menu-item>
						<el-menu-item index="cart">购物车</el-menu-item>
						<el-menu-item index="order">我的订单</el-menu-item>
						<el-menu-item index="edit">个人信息设置</el-menu-item>
					</el-menu>
				</el-col>
				<el-col :span="6" >
					<div>
						<p>
							<template v-if="!imgUrl">
								<el-avatar shape="circle" :size="45" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
							</template>
							<template v-else>
								<el-avatar shape="circle" :size="45" :src="`${$Imgurl}/api/public/showImg/${imgUrl}`"></el-avatar>
							</template>
							<span @click="getToken()">{{state}}</span>
						</p>
						<p @click="reomveState()">退出</p>
					</div>
				</el-col>
			</el-row>
			<el-dialog v-model="centerDialogVisible" title="登录" width="30%" center>
					<div>
						<el-input v-model="uname" >
						  <template #prepend>账号</template>
						</el-input>
						<form>
							<el-input v-model="pwd" show-password >
								<template #prepend>密码</template>
							</el-input>
						</form>
						<span class="info" @click="flag=!flag">
							{{flag?'没有账号？点击此处注册账号':'已有账号，返回登录'}}
						</span>
					  </div>
			  <template #footer>
			    <span class="dialog-footer">
			      <el-button @click="centerDialogVisible = false">取消</el-button>
				  <template v-if="flag">
					  <el-button type="primary" @click="getoffest()">确定 </el-button>
				  </template>
				  <template v-else>
					  <el-button type="primary" @click="Info()">注册</el-button>
				  </template>
			    </span>
			  </template>
			</el-dialog>
		</el-header>
		<router-view></router-view>
	</div>
</template>

<script>
	
	import {mapMutations,mapState} from 'vuex'
	import { ElMessage } from 'element-plus'
	export default {
		name:'Home',
		data(){
			return{
				state:'请登录',//用户名
				imgUrl:'',//用户头像
				centerDialogVisible:false,
				uname:'',
				pwd:'',
				token_type:'',
				access_token:'',
				flag:true,
			}
		},
		methods:{
			getToken(){
				if(!localStorage.getItem('role')){
					this.centerDialogVisible=true//开启弹窗
				}else{
					this.centerDialogVisible=false
					ElMessage({ message:"已登录,请勿重复操作",type: "success"});
				}
			},
			getoffest(){
				this.centerDialogVisible=false//关闭弹窗
				let fromdata = new FormData();
				fromdata.append('username',this.uname)
				fromdata.append('password',this.pwd)
				fromdata.append('grant_type','password')
				fromdata.append('client_id',"sobook4")
				fromdata.append('client_secret','444444')
				//登录成功
				this.axios.post('/oauth/token',fromdata).then((res)=>{
					let data = res.data
					if(res.status===200){
						this.token_type=data.token_type;
						this.access_token=data.access_token;
						//将token存入本地
						localStorage.setItem('token',data.access_token)
						if(!localStorage.getItem('role')){
							ElMessage({ message:"登录成功",type: "success"});
						}
						this.axios.get('/api/info/getUser').then((rs)=>{
							let data = rs.data
						//将角色和登录者的数据{登录者角色：nickname，登录账号：role}存入本地浏览器
							localStorage.setItem('role',data.role)//登录者角色
							localStorage.setItem('account',data.account)//账号
							localStorage.setItem('nickname',data.nickname)//昵称
							localStorage.setItem('imgs',data.img)//图片
							localStorage.setItem('phone',data.phone)//电话
							this.state=localStorage.getItem('nickname')//用户名
							this.imgUrl=localStorage.getItem('imgs')//图片
							if(localStorage.getItem('role')=="G"){
								this.$router.push({path:'/admin'})
							}
						}).catch((err)=>{
							// console.log(err);
						})
					}
				}).catch((error)=>{
					// console.log(error);
					ElMessage({message:"用户名或者密码错误，请重新输入！",type: "error"})
				});
			},
			//注册账号
			Info(){
				let obj = {
					account:this.uname,
					password:this.pwd,
					role:String.fromCharCode(80),
					phone:"",
					nickname:"新用户",
					closed:0
				}
				this.axios.post('/api/public/addUser',obj).then((res)=>{
					if(res.data.code==200){
						//注册成功切换回登录页面
						this.flag=true
						ElMessage({message:"注册成功！",type: "success"})
					}else{
						ElMessage({message:"注册失败，该用户名已被注册！",type: "error"})
					}
				}).catch((error)=>{
					// console.log(error);
				})
				
			},
			reomveState(){
				//删除后刷新当前页面
				this.removeobj()
				this.$router.go(0)
			},
			...mapMutations(['removeobj'])
		},
		created() {
			if(localStorage.getItem('nickname')){
				this.state=localStorage.getItem('nickname')//用户名
				this.imgUrl=localStorage.getItem('imgs')//图片
			}
			if(localStorage.getItem('role')=="G"){
				this.$router.push({path:'/admin'})
			}
			
		}
	}
</script>

<style scoped>
	.el-header
	{
	  background-color: #3575ff;
	  text-align: center;
	  line-height: 60px;
	  max-height: 60px;
	}
	.el-col-11{
		color: white;
		font-size: 12px;
	}
	.el-col{
		color: white;
		line-height: 60px;
	}
	.el-col-6{
		color: white;
		font-size: 14px;
	}
	.el-col-6 div{
		width: 100%;
		line-height: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.el-col-6 div p{
		color: #deb887;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.el-col-6 div p:last-child:active{
		color: #ff5500;
	}
	.el-col-6 div p span{
		margin-left: 20px;
	}
	.el-menu--horizontal>.el-menu-item.is-active{
		border-bottom: 3px solid var(--el-menu-active-color);
	}
	:deep(.el-dialog__body){
		padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 0px !important;
	}
	.info{
		cursor: pointer;
	}
	.info:hover,.info:active{
		color: #cc1013;
	}
</style>
